<template>
  <AvicModal
    :visible="true"
    :title="`流程名称：${flowName}`"
    :body-style="{ padding: 0 }"
    width="90%"
    height="90%"
    :centered="true"
    @cancel="closeModal"
  >
    <div class="flow-chart">
      <a-spin :spinning="spinning" :class="{ 'bpm-x6chart-spin-box': spinning }">
        <div class="bpm-x6chart">
          <AvicBpmFlowCanvas ref="flowCanvas" :graph-option="graphOption" :data="flowData" />
        </div>
      </a-spin>
    </div>
    <template #footer>
      <a-button title="返回" type="primary" ghost @click="closeModal">返回</a-button>
    </template>
  </AvicModal>
</template>
<script lang="ts" setup>
import AvicBpmFlowCanvas from '@/views/avic/bpm/flowdetail/components/bpm-flow-canvas/index.vue';
const props = defineProps({
  flowName: {
    type: String,
    required: true
  },
  graphOption: {
    type: Object,
    required: true,
    default: () => {}
  },
  flowData: {
    type: Object,
    required: true,
    default: () => {}
  }
});
const spinning = computed(() => !props.flowData);
const $emit = defineEmits(['close']);

function closeModal() {
  $emit('close');
}
</script>
<style lang="less" scoped>
.main {
  border: 1px solid #d6dce3;
}
.flow-chart {
  height: 100%;
}
.bpm-x6chart-spin-box {
  height: 100%;
}
.ant-spin-nested-loading {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
  > div {
    height: 100%;
  }
}
.bpm-x6chart {
  height: 100%;
  .graph-container,
  .layout {
    height: 100%;
  }
  :deep(.x6-graph-scroller) {
    height: 100% !important;
    // overflow: visible !important;
    .x6-graph {
      box-shadow: none;
    }
  }
}
</style>
